<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
				xmlns:ui="http://java.sun.com/jsf/facelets"
				xmlns:h="http://java.sun.com/jsf/html"
				xmlns:f="http://java.sun.com/jsf/core"
				xmlns:s="http://jboss.com/products/seam/taglib"
				xmlns:rich="http://richfaces.org/rich"
				xmlns:a4j="http://richfaces.org/a4j"
				template="../template.xhtml">

	<!-- content -->
	<ui:define name="content">
		<h:form id="formdetalhes">
		<h:messages styleClass="message" id="globalMessages" />
		<rich:panel id="paneldetalhes">
			<f:facet name="header">Compra</f:facet>
			
			<table border="0">
				<tr>
					<td width="25%">
					
					<s:validateAll>
			        <h:panelGrid id="griddetalhes" columns="3">
			        
		                <h:outputText value="Data:"/>
		                <rich:calendar id="dataCompradt" locale="pt_BR" datePattern="dd/MM/yyyy"
		                	value="#{compraBean.compra.data}" />
		                <h:outputText value=""/>
			        
			            <h:outputText value="Supermercado:"/>
		                <h:inputText id="supermercado" value="#{compraBean.nomeSupermercado}"
		                	size="30" />
		                <rich:suggestionbox id="supermercadosb" for="supermercado" 
		                    suggestionAction="#{compraBean.carregarSupermercados}" 
		                    var="sup"
		                    width="220"
		                    height="120"
		                    fetchValue="#{sup.descricao}"
		                    minChars="3"
		                    shadowOpacity="5"
		                    border="1" 
		                    shadowDepth="5"
		                    cellpadding="1"
		                    nothingLabel="Nenhum supermercado encontrado"
		                    ignoreDupResponses="true"
		                    eventsQueue="supQueue"
		                    requestDelay="50"
		                    ajaxSingle="true">
		                    <h:column>
		                        <h:outputText value="#{sup.descricao}" />
		                    </h:column>
		                </rich:suggestionbox>
		                
			            <h:outputText value="Produto:"/>
		                <h:inputText id="produto" value="#{compraBean.nomeProduto}"
		                	size="30" />
		                <rich:suggestionbox id="produtosb" for="produto" 
		                    suggestionAction="#{compraBean.carregarProdutos}" 
		                    var="produto"
		                    width="220"
		                    height="120"
		                    fetchValue="#{produto.descricao}"
		                    minChars="3"
		                    shadowOpacity="5"
		                    border="1" 
		                    shadowDepth="5"
		                    cellpadding="1"
		                    ignoreDupResponses="true"
		                    eventsQueue="produtosQ"
		                    requestDelay="70"
		                    ajaxSingle="true">
		                    <a4j:support 
		                    	event="onselect"
		                    	reRender="ultimosPrecos"
		                    	oncomplete="$('formdetalhes:ultimosPrecos').style.display = 'block';" 
		                    	action="#{compraBean.carregarUltimosPrecos}" />
		                    
		                    <h:column>
		                        <h:outputText value="#{produto.descricao}" />
		                    </h:column>
		                </rich:suggestionbox>
		                
		                <h:outputText value="Preco:"/>
		                <h:inputText id="preco" maxlength="5" value="#{compraBean.compra.preco}" >
		                	<f:converter converterId="javax.faces.BigDecimal" />
		                </h:inputText>
		                <h:outputText value=""/>
			        </h:panelGrid>
			        </s:validateAll>
			        
					</td>
					<td width="75%">
						<h:outputText 
							id="ultimosPrecos"
							escape="false"
							style="position:relative; width:400px; height:90px; background:#FFFF88;	display:none; padding: 3px;" 
							value="#{compraBean.ultimosPrecos}"  />
					</td>
				</tr>
			</table>

			        
		</rich:panel>
		<br />
		<div class="actionButtons">
			<h:commandButton id="atualizar" value="Atualizar"
				action="#{compraBean.update}" />
			<h:commandButton id="cancelar" value="Cancelar" action="ok" immediate="true" />
		</div>
		</h:form>
	</ui:define>
</ui:composition>
